<template>
  <div id="app" class="app">
    <vue-particles class="particles-js"
                   color="#dedede"
                   :particleOpacity="0.7"
                   :particlesNumber="88"
                   shapeType="star"
                   :particleSize="8"
                   linesColor="#dedede"
                   :linesWidth="2"
                   :lineLinked="true"
                   :lineOpacity="0.6"
                   :linesDistance="150"
                   :moveSpeed="3"
                   :hoverEffect="true"
                   hoverMode="grab"
                   :clickEffect="true"
                   clickMode="push"
    >
    </vue-particles>
    <div class="wrapper">
      <div class="form-signin">
        <h2 class="form-signin-heading text-center">登录</h2>
        <mu-container>
          <mu-text-field label="用户名" label-float name="username" v-model="username" help-text="用户名/邮箱/手机号" full-width
                         icon="account_circle"></mu-text-field>
          <br/>
          <mu-text-field label="密码" name="password" v-model="password" label-float error-text="请输入密码" full-width
                         icon="locked"></mu-text-field>
          <br/>
        </mu-container>
        <mu-container class="wrapper">
          <mu-flex justify-content="center" align-items="center">
            <mu-button color="primary" large round full-width @click="doLogin">登录</mu-button>
          </mu-flex>
        </mu-container>
      </div>
    </div>
  </div>
</template>

<script>
  import {getQueryString} from '@/utils/base'
  import {login} from '@/api/api'
  export default {
    data () {
      return {
        show: false,
        username: '',
        password: '',
        errMsg: ''
      }
    },
    created () {
    },
    methods: {
      doLogin () {
        if (!this.username || !this.password) {
          this.errMsg = '请填写完整信息再尝试！'
          return
        }
        login(this.$data).then(res => {
          this.$store.dispatch('logined', {
            token: res.token,
            refreshToken: res.refreshToken
          })
          localStorage.setItem('username', res.username)
          let redirectUrl = getQueryString('redirect')
          if (redirectUrl) {
            this.$router.push({path: redirectUrl})
          } else {
            this.$router.go(-1)
          }
        })
      }
    },
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  .particles-js {
    background-size: cover;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background: radial-gradient(220% 105% at top center, #4f69f4 10%, #9116a4);
    /*background-color: #26AFE3;*/
  }

  .wrapper {
    margin-top: 10%;
    /*margin-bottom: 33%;*/
  }

  .form-signin {
    max-width: 400px;
    padding: 33px 33px 33px;
    margin: 0 auto;
    background-color: rgba(213, 211, 254, 0.66);
    border: 1px solid rgba(0, 0, 0, 0.1);
  }

</style>
